<template>
	<view class="activity-item" @click="handleClick">
		<view class="main-box flex">
			<view class="image-box">
				<image class="cover-image" :src="data.image || '/static/images/no-images.png'" mode="aspectFill" />
				<text v-if="data.activityStatusDup === 1" class="sign blue">报名中</text>
				<text v-if="data.activityStatusDup === 2" class="sign orange">进行中</text>
				<text v-if="data.activityStatusDup === 3" class="sign gray">已结束</text>
			</view>
			<view class="content-box flex-1 flex-column">
				<view class="item-name line-1">{{ data.name }}</view>
				<view v-if="!isSignUpPage" class="desc-box line-1">活动说明：{{ data.content }}</view>
				<view v-if="isSignUpPage" class="desc-box line-1">报名人数：{{ data.applicationCountDup }}/{{ data.num }}人</view>
				<view class="date-box">开始时间：{{ parseTime(data.start_at, "{y}-{m}-{d} {h}:{i}") }}</view>
			</view>
		</view>
		<view class="end-time">报名截止：{{ data.application_at }}</view>
		<template v-if="!isSignUpPage">
			<button v-if="data.activityStatusDup === 1" class="detail-button" hover-class="is-hover" type="primary">活动报名</button>
			<button v-else class="detail-button" hover-class="is-hover" type="default">查看详情</button>
		</template>
	</view>
</template>

<script setup>
	const props = defineProps({
		// 数据源
		data: {
			type: Object,
			default: () => {
				return {}
			}
		},
		// 是否报名页面
		isSignUpPage: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(["click"])

	// 点击事件
	function handleClick() {
		uni.navigateTo({
			url: `/pages/activity/detail?id=${props.data.id}`
		})
	}
</script>

<style scoped lang="scss">
	.activity-item {
		background-color: #FFFFFF;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;

		.main-box {
			column-gap: 30rpx;

			.image-box {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				overflow: hidden;
				position: relative;

				.sign {
					position: absolute;
					top: 0;
					left: 0;
					font-size: 18rpx;
					color: #FFFFFF;
					border-radius: 10rpx 0 10rpx 0;
					padding: 5rpx 8rpx;

					&.blue {
						background-color: var(--primary-color);
					}

					&.orange {
						background-color: #FA6500;
					}

					&.gray {
						background-color: #697080;
					}
				}
			}

			.content-box {
				row-gap: 18rpx;

				.item-name {
					font-size: 30rpx;
					font-weight: bold;
				}

				.desc-box {
					font-size: 24rpx;
					color: var(--gray-font-color);
				}

				.date-box {
					font-size: 24rpx;
					color: var(--gray-font-color);
				}
			}
		}

		.end-time {
			font-size: 24rpx;
			color: var(--default-font-color);
			margin-top: 28rpx;
			margin-bottom: 20rpx;
		}

		.detail-button {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
		}
	}
</style>